<template>
  <div ref="container" class="container"></div>
</template>

<script setup lang="ts">
import JazzIcon from "@metamask/jazzicon";
import { ref, onMounted, toRefs, unref, watch } from "vue";
const container = ref();
const clientWidth = ref(0)
const props = defineProps<{
  diameter: number,
  seed: string | number
}>()
const { diameter, seed } = toRefs(props);
watch(seed,()=>{
  container.value.removeChild(container.value.firstChild);
  build();
})
const jsNumberForAddress = (address: string) => {
  const addr = address.slice(2, 10);
  return parseInt(addr, 16);
};
const build = () => {
  let s = unref(seed);
  if (typeof s === "string") {
    s = jsNumberForAddress(s);
  }
  container.value.appendChild(JazzIcon(clientWidth.value < 750 ? (unref(diameter) * (clientWidth.value / 750)) : unref(diameter), s));
};
onMounted(() => {
  clientWidth.value = document.documentElement.clientWidth
  build();
})
</script>

<style scoped lang="scss">
.container {
  width: 100% !important;
  height: 100% !important;
}
</style>
